<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>直播系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        corePlugins: {
          preflight: false, // 禁用预检样式
        },
      };
    </script>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>🎥 直播系统</h1>
      </header>

      <main>
        <div class="video-section">
          <div class="local-video-container">
            <h2>本地摄像头</h2>
            <video id="localVideo" autoplay muted playsinline></video>
            <div class="controls">
              <button id="startBtn">开始直播</button>
              <button id="stopBtn" disabled>停止直播</button>
              <button id="cameraToggle">切换摄像头</button>
            </div>
            <div class="status">
              <span id="status">未连接</span>
            </div>
            <div class="stream-info" id="streamInfo">
              <h3>直播间信息</h3>
              <div class="stream-id-container">
                <label>直播间ID：</label>
                <span id="currentStreamId"></span>
                <button id="copyStreamId" title="复制直播间ID">📋</button>
              </div>
            </div>
          </div>

          <div class="remote-video-container">
            <h2>直播观看</h2>
            <video id="remoteVideo" autoplay playsinline muted controls></video>
            <div id="playPrompt" class="play-prompt">
              <p>视频已接收，点击播放按钮开始观看</p>
              <button id="manualPlayBtn">播放视频</button>
            </div>
            <div class="viewer-controls">
              <input type="text" id="streamUrl" placeholder="输入直播间ID" />
              <button id="joinBtn">加入直播间</button>
              <button id="leaveBtn" disabled>离开直播间</button>
            </div>
          </div>
        </div>

        <!-- 聊天室已隐藏 
        <div class="chat-section">
          <div class="chat-container">
            <h3>聊天室</h3>
            <div id="messages" class="messages"></div>
            <div class="chat-input">
              <input type="text" id="messageInput" placeholder="输入消息..." />
              <button id="sendBtn">发送</button>
            </div>
          </div>
        </div>
        -->
      </main>
    </div>

    <script src="js/webrtc.js"></script>
    <!-- <script src="js/chat.js"></script> -->
    <script src="js/main.js"></script>
  </body>
</html>
